<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
</head>
<body>
<!-- 单选时： -->
<div id="rw-1">
    <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>
</div>
<br>

<!-- 多选时 (绑定到一个数组)： -->
<div id="rw-2">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>
<br>

<!-- 用 v-for 渲染的动态选项： -->
<div id="rw-3">
    <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
          {{ option.text }}
        </option>
      </select>
      <span>Selected: {{ selected }}</span>      
</div>
</body>
<script src="../vue.js"></script>
<script>
new Vue({
  el: '#rw-1',
  data: {
    selected: ''
  }
}),

new Vue({
  el: '#rw-2',
  data: {
    selected: []
  }
}),

new Vue({
  el: '#rw-3',
  data: {
    selected: 'A',
    options: [
      { text: '1', value: 'A' },
      { text: '2', value: 'B' },
      { text: '3', value: 'C' }
    ]
  }
})
</script>
</html>